<template>
  <div class="product-list">
    <el-menu
      :default-active="activeIndex"
      style="height: 43px; margin-bottom: 20px"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">普通订单</el-menu-item>
      <el-menu-item index="2">外卖订单</el-menu-item>
      <el-menu-item index="3">服务订单</el-menu-item>
      <el-menu-item index="4">虚拟订单</el-menu-item>
    </el-menu>
    <component :is="currentComponent"></component>

  </div>
</template>

<script>

import TakeawayOrder from "../takeaway/index.vue";
import ServiceOrder from "../service/index.vue";

export default {
  components: {
    TakeawayOrder,
    ServiceOrder,
  },
  data() {
    return {
      currentComponent:"ServiceOrder",
      activeIndex:"1"
    }
  },
  created() {

  },
  methods: {
    handleSelect(key){
      console.log(key)
      const componentMap = {
        1: "OrdinaryOrder",
        2: "TakeawayOrder",
        3: "ServiceOrder",
        4: "VirtualOrder",
      };
      this.currentComponent = componentMap[key] || "ServiceOrder";
    },
  },
}
</script>

<style>

</style>